<template>
  <Layout class="main" style="height: 100%">
    <Sider
      :collapsed-width="68"
      :style="{overflow: 'hidden',background:'#5A6FCE'}"
      :width="200"
      class="left-sider"
      collapsible
      hide-trigger
      v-model="collapsed"
    >
      <side-menu
        :active-name="activeName"
        :collapsed="collapsed"
        :menu-list="menuList"
        @on-select="turnToPage"
        accordion
        ref="sideMenu"
      >
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con" style="height:8vw;width:100%;">
          <img
            :src="maxLogo"
            key="max-logo"
            style="margin-top:2vw;width:60%;height:auto;"
            v-show="!collapsed"
          />
          <img
            :src="minLogo"
            key="min-logo"
            style="margin-top:3vw;height:0.8vw;width:50%;height:auto;"
            v-show="collapsed"
          />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header :style="{padding:'0 25px'}" class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
          <!-- <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
          <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>-->
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <!-- <div class="tag-nav-wrapper">
            <tags-nav
              :list="tagNavList"
              :value="$route"
              @input="handleClick"
              @on-close="handleCloseTag"
            />
          </div> -->
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
            <!-- <keep-alive> -->
              <router-view />
            </keep-alive>
            <ABackTop :bottom="80" :height="100" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu';
import HeaderBar from './components/header-bar';
import TagsNav from './components/tags-nav';
import User from './components/user';
import ABackTop from './components/a-back-top';
import Fullscreen from './components/fullscreen';
import Language from './components/language';
import ErrorStore from './components/error-store';
import { mapMutations, mapActions, mapGetters } from 'vuex';
import { getNewTagList, routeEqual } from '@/libs/util';
import routers from '@/router/routers';
// eslint-disable-next-line import/no-duplicates
import minLogo from '@/assets/images/minlog.png';
// eslint-disable-next-line import/no-duplicates
import maxLogo from '@/assets/images/logo.png';
import './main.less';
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false
    };
  },
  computed: {
    ...mapGetters(['errorCount']),
    tagNavList () {
      return this.$store.state.app.tagNavList;
    },
    tagRouter () {
      return this.$store.state.app.tagRouter;
    },
    userAvatar () {
      return this.$store.state.user.avatarImgPath;
    },
    cacheList () {
      // const list = [
      //   'ParentView',
      //   ...(this.tagNavList.length
      //     ? this.tagNavList
      //       .filter(item => !(item.meta && item.meta.notCache))
      //       .map(item => item.name)
      //     : [])
      // ];
      const list = [
        'ParentView',
        'construction_list',
        'supervisor_list',
        'design_value_config'
      ];
      return list;
    },
    menuList () {
      const routers = this.$store.getters.menuList;
      console.log(routers);
      // const designValueMenu = {
      //   icon: 'iconfont icon-jibenxinxi',
      //   meta: {
      //     hideInMenu: false,
      //     icon: 'iconfont icon-jibenxinxi',
      //     title: '设计值配置'
      //   },
      //   name: 'design_value_config'
      // };
      // if (routers[0] && routers[0].children) {
      //   routers[0].children.push(designValueMenu);
      // }
      return routers;
    },
    local () {
      return this.$store.state.app.local;
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage;
    },
    unreadCount () {
      return this.$store.state.user.unreadCount;
    },
    activeName () {
      if (this.$route.meta && this.$route.meta.activeName) {
        return this.$route.meta.activeName;
      }
      return this.$route.name;
    }

  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag'
    ]),
    ...mapActions(['handleLogin', 'getUnreadMessageCount']),
    turnToPage (route) {
      let { name, params, query } = {};
      if (typeof route === 'string') name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1]);
        return;
      }
      this.$router.push({
        name,
        params,
        query
      });
    },
    handleCollapsedChange (state) {
      this.collapsed = state;
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$config.homeName);
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route);
          }
        }
      }
      this.setTagNavList(res);
    },
    handleClick (item) {
      this.turnToPage(item);
    }
  },
  watch: {

    $route (newRoute) {
      const { name, query, params, meta } = newRoute;
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      });
      this.setBreadCrumb(newRoute);
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
      this.$refs.sideMenu.updateOpenName(newRoute.name);
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList();
    this.setHomeRoute(routers);
    const { name, params, query, meta } = this.$route;
    this.addTag({
      route: { name, params, query, meta }
    });
    this.setBreadCrumb(this.$route);
    // 设置初始语言
    this.setLocal(this.$i18n.locale);
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      });
    }
    // 获取未读消息条数
    // this.getUnreadMessageCount();
  }
};
</script>
